<template>
  <view class="container">
    <uv-sticky bgColor="#fff">
      <uv-tabs :list="tabsList" :current="tabsCurrent" :lineWidth="58" :inactiveStyle="{color: '#666'}"
        :activeStyle="{color: '#333'}" :itemStyle="{ height: '44px', width: '200rpx'}" @click="tabsHandler"></uv-tabs>
      <view class="head_right" @tap="checkboxToggle">
        {{checkboxShow? '完成' :'管理'}}
      </view>
    </uv-sticky>
    <view class="main">
      <view class="main_box" v-for="(item,index) in list" :key="index">
        <uv-checkbox-group v-if="checkboxShow">
          <uv-checkbox label="" shape="circle" :checked="item.checkbox">
            <view class="main_box_left">
              <image :src="item.image" mode=""></image>
              <view>
                <image
                  :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
                  mode=""></image>
                <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
              </view>
            </view>
            <view class="main_box_content">
              <view class="main_box_content_head ellipsis">
                {{item.title}}
              </view>
              <view class="main_box_content_footer">
                <text>{{`已更新${item.episodes || 1}期`}}</text>
              </view>
            </view>
          </uv-checkbox>
        </uv-checkbox-group>
        <template v-else>
          <view class="main_box_left">
            <image :src="item.image" mode=""></image>
            <view>
              <image
                :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
                mode=""></image>
              <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
            </view>
          </view>
          <view class="main_box_content">
            <view class="main_box_content_head ellipsis">
              {{item.title}}
            </view>
            <view class="main_box_content_footer">
              <text>{{`已更新${item.episodes || 1}期`}}</text>
            </view>
          </view>
        </template>
      </view>
    </view>
    <view class="check_box" v-if="checkboxShow">
      <uv-checkbox-group shape="circle">
        <uv-checkbox label="全选" name="all" :checked="checkboxValue" @change="allCheckHandler"></uv-checkbox>
      </uv-checkbox-group>
      <button>取消收藏</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const tabsList = ref([
    {
      name: '知识商品',
    }, {
      name: '实物商品',
    },
  ])
  const checkboxValue = ref(false)
  const tabsCurrent = ref(0)
  const tabsHandler = (item : any) => {
    console.log(item)
    tabsCurrent.value = item.index
  }
  const checkboxShow = ref(false)
  const checkboxToggle = () => {
    checkboxShow.value = !checkboxShow.value
    list.value.forEach(item => {
      item.checkbox = false
    })
    checkboxValue.value = false
  }
  const allCheckHandler = () => {
    checkboxValue.value = !checkboxValue.value
    console.log(checkboxValue.value)
    list.value.forEach(item => {
      item.checkbox = checkboxValue.value
    })
  }
  const list = ref([])
  const data = [
    {
      image: '/static/taotaitupian/wangyesheji.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/xianshangzhaoping.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    },
  ]
  const getList = () => {
    list.value.push(...data)
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 20
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    list.value.push(...data)
  })
</script>

<style lang="less" scoped>
  .container {
    box-sizing: border-box;

    :deep(.uv-sticky) {

      font-size: 28rpx !important;
      .uv-sticky__content{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
      }
    }
    :deep(.uv-tabs__wrapper__nav__line) {
      background: #228CFE !important;
    }
    .head_right {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      height: 44px;
      width: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    
      &:active {
        background-color: #f1f1f1;
      }
    }

    .main {
      padding: 30rpx;
      box-sizing: border-box;

      &_box {
        border-bottom: 1px solid rgba(#000, .1);
        padding-bottom: 40rpx;
        margin-bottom: 40rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        :deep(.uv-checkbox-group--row) {
          align-content: center;
          justify-content: center;

          .uv-checkbox {
            width: 100%;

            .uv-checkbox__label-wrap {
              flex-direction: row;
            }
          }
        }

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
          margin-bottom: 0;
        }

        &_left {
          position: relative;
          margin-right: 20rpx;
          border-radius: 8rpx;
          width: 240rpx;
          height: 160rpx;

          image {
            width: 240rpx;
            height: 160rpx;
            border-radius: 8rpx;
          }

          >view {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #343434;
            border-radius: 0rpx 10rpx 0rpx 10rpx;
            opacity: 0.6;
            color: #fff;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90rpx;
            height: 36rpx;

            image {
              width: 32rpx;
              height: 32rpx;
              margin-right: 2rpx;
            }
          }
        }

        &_content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          flex: 1;

          &_head {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;

            text {
              font-size: 24rpx;
              color: #666666;
              margin-top: 18rpx;
            }
          }

          &_footer {
            font-size: 24rpx;
            color: #333333;
            margin-bottom: 8rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 47rpx;
          }
        }
      }
    }
  }

  .check_box {
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 100rpx;
    background-color: #fff;
    padding: 15rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1rpx solid rgba(#000, .1);

    button {
      width: 560rpx;
      height: 70rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 34rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
      padding: 0;
      margin: 0;
    }
  }
</style>